<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>LZXリファレンス lztrack</title>
  <othercredit role="translator">
    <firstname>Atuo</firstname>
    <surname>Seki</surname>
        <contrib>2006/05/17　翻訳初版</contrib>
 </othercredit>
<link rel="STYLESHEET" type="text/css" href="./styles.css" /></head>
<body>

<!-- ===================================================================== -->
<!-- = XML information goes here                                         = -->
<!-- ===================================================================== -->
<lzelement title="LzTrack">
    <lztier>Service</lztier>
    <lzcategory>Event</lzcategory>
    <lzshortdesc>
        viewグループ上でのマウストラックイベントを可能にします。
    </lzshortdesc>
    <lzapi>api-lztrack.xml</lzapi>
</lzelement>

<p>このサービスは多くのview上でのマウストラック(一般的なメニューのドラッグ・アンド・ドロップの
仕様の様な)を支援します。マウスが押されている時、<event>ondragin</event>や
<event>ondragout</event>などの一般的なviewイベントをonmousedownイベントを
受けているviewだけに送ります。viewが<classname>LzTrack</classname>
サービスを登録して使用する時、それらはマウスボタンの状態とは無関係のイベントを受け取るでしょう。
</p>
<p>
LzTrackを使用する際、viewは特定のグループで登録します。
典型的に、ユーザーイベントによってそのグループはアクティブになります。  
グループがアクティブの時、マウスが入ったり(<event>ontrackover</event>)、離れたり
(<event>ontrackout</event>)、ボタンが上がる(<event>ontrackup</event>)
たびにLzTrackはアクティブグループにイベントのサービスをするでしょう。
</p>

<h2>例:シンプルカラーピッカー</h2>
<p>
シングルカラーピッカーは長方形の中の色を表示させます、マウスが押された状態で長方形の色の上にのった場合、
一組の色が表示(少し下に表示)されます。マウスが押されている間、ユーザーはマウスを動かして色を選択するでしょう。
マウスボタンを色の上で離す時、その色は選択され、メニューは見えなくなります。
</p>
<!--
<img src="images/lztrack/colorpicker.gif" width="131" height="42" />
-->
<p>以下のコードはトラックのviewを表すクラス"colorspot"を定義します。
このクラスはトラックイベントがトリガーとなって起きた視覚的なステータス変更を扱い、
新しい色が選択されている場合は親へその色コードを送ります。  <method>LzTrack.register</method>
はviewのインスタンスをグループに追加する為<event>oninit</event>で呼び出しています。
グループ名はクラスの属性で定義しますが、単に親の属性とバインドしてください。
シンプルなメニュートラックに、１セットのview群が同じトラックグループを共有するのは典型的な事です；
しかしながら、viewの階層構造の中のならどこにでも同じトラックグループを共有するトラックviewが
あるかもしれません。</p>

<example title="Using LzTrack to build a color chooser">
&lt;canvas height="60"&gt;
  &lt;class name="colorspot" clickable="true"
    width="22" height="22" bgcolor="0x000000"&gt;
    &lt;attribute name="mycolor"/&gt;
    &lt;attribute name="trackgroup" type="string" value="${parent.trackgroup}"/&gt;
    &lt;view name="spot" bgcolor="${parent.mycolor}"
        x="2" y="2" width="18" height="18"/&gt;
    &lt;method event="oninit"&gt;
        LzTrack.register(this, this.trackgroup);
    &lt;/method&gt;
    &lt;method event="onmousetrackover"&gt;
        setAttribute('bgcolor', 0xdedede); // hilite: gray
    &lt;/method&gt;
    &lt;method event="onmousetrackout"&gt;
        setAttribute('bgcolor', 0x000000); // normal: black
    &lt;/method&gt;
    &lt;method event="onmousetrackup"&gt;
        parent.onnewcolor.sendEvent(this.spot.bgcolor);
    &lt;/method&gt;
  &lt;/class&gt;

  &lt;view bgcolor="0x0000ff" width="20" height="20"
      onmousedown="this.colorpicker.setVisible(true); LzTrack.activate('mymenu');"
      onmouseup="this.colorpicker.setVisible(false); LzTrack.deactivate('mymenu');"&gt;
    &lt;view name="colorpicker" visible="false" x="10" y="10"&gt;
      &lt;attribute name="trackgroup" value="mymenu" type="string"/&gt;
      &lt;method event="onnewcolor" args="newcolor"&gt;
          parent.setAttribute('bgcolor', newcolor);
      &lt;/method&gt;

      &lt;simplelayout axis="x"/&gt;
      &lt;colorspot mycolor="0x0000ff"/&gt;
      &lt;colorspot mycolor="0x00ff00"/&gt;
      &lt;colorspot mycolor="0xffff00"/&gt;
      &lt;colorspot mycolor="0xff0000"/&gt;
      &lt;colorspot mycolor="0x00ffff"/&gt;
    &lt;/view&gt;
  &lt;/view&gt;
  &lt;text&gt;Click on the square, then release the mouse button to select a new color.&lt;/text&gt;
  &lt;simplelayout axis="y" spacing="20"/&gt;
&lt;/canvas&gt;
</example>

</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
